<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>原生js撸时间</title>
    <script type="text/javascript">
      var t = null;
      function time() {
        dt = new Date();
        var y = dt.getFullYear();
        var M = dt.getMonth() + 1;
        var d = dt.getDate();
        var h = dt.getHours();
        var m = dt.getMinutes();
        var s = dt.getSeconds();
        if (d < 10) {
          d = "0" + d;
        } else if (d < 0) {
          d = 0;
        }
        if (h < 10) {
          h = "0" + h;
        } else if (h < 0) {
          h = 0;
        }
        if (m < 10) {
          m = "0" + m;
        } else if (m < 0) {
          m = 0;
        }
        if (s < 10) {
          s = "0" + s;
        } else if (s < 0) {
          s = 0;
        }
        if (M < 10) {
          M = "0" + M;
        }
        document.getElementById("showtime").innerHTML =
          "当前时间：" +
          y +
          "年" +
          M +
          "月" +
          d +
          "日" +
          h +
          "时" +
          m +
          "分" +
          s +
          "秒";
        t = setTimeout(time, 1000);
      }
      window.onload = function () {
        time();
      };
    </script>
  </head>
  <body>
    <div id="showtime"></div>
  </body>
  <style>
    body {
      background: url(https://images.unsplash.com/photo-1591534577354-ccb535d9c895?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=150&ixlib=rb-1.2.1&q=80&w=150)
        no-repeat;
      background-size: 300px;
      opacity: 0.8;
    }
  </style>
</html>
